<script setup lang="ts">
import { NImage } from "naive-ui";
import { textReplaceEmoji } from "@/utils/emojis";
import { textReplaceLink, textReplaceMention } from "@/utils/strings";
import { Data, MixedExtra } from "./types.d";
import { getImageInfo } from "@/utils/functions";

const props = defineProps<{
  extra: MixedExtra;
  data: Data;
  maxWidth: Boolean;
}>();

const float = props.data.float;

const maxWidth = (src, width = 200) => {
  const info = getImageInfo(src);

  if (info.width == 0) {
    return width;
  }

  if (info.width < width) {
    return info.width;
  }

  return width;
};

const img = (src, width = 200) => {
  const info = getImageInfo(src);

  if (info.width == 0 || info.height == 0) {
    return {};
  }

  if (info.width < width) {
    return {
      width: `${info.width}px`,
      height: `${info.height}px`,
    };
  }

  return {
    width: width + "px",
    height: parseInt(info.height / (info.width / width)) + "px",
  };
};
</script>

<template>
  <div
    class="im-message-mixed"
    :class="{
      left: float == 'left',
      right: float == 'right',
      maxwidth: maxWidth,
    }"
  >
    <pre>
      <template v-for="item in extra.items">
        <template v-if="item.type === 1">
          <span v-html="textReplaceEmoji(textReplaceLink(textReplaceMention(item.content, '#EE9028')))" />
        </template>

        <template v-else-if="item.type === 3">
          <div
            :style="img(item.content, 300)"
            style="display: flex; margin: 5px 0;border-radius: 8px;overflow: hidden;;"
          >
            <n-image :src="item.content"></n-image>
          </div>
        </template>
      </template>
    </pre>
  </div>
</template>

<style lang="less" scoped>
.im-message-mixed {
  overflow: hidden;
  padding: 5px;
  border-radius: 10px 0px 10px 10px;
  background: var(--im-message-left-bg-color);
  min-width: 30px;
  min-height: 30px;

  &.left {
    background: var(--im-message-right-bg-color);
    border-radius: 0px 10px 10px 10px;
  }

  :deep(.n-image img) {
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }

  &.right {
    background-color: var(--im-message-right-bg-color);
    color: var(--im-message-right-text-color);
    border-radius: 10px 0px 10px 10px;
  }

  &.maxwidth {
    max-width: 50%;
  }

  pre {
    display: flex;
    flex-direction: column;
    white-space: pre-wrap;
    overflow: hidden;
    word-break: break-word;
    word-wrap: break-word;
    font-size: 14px;
    padding: 3px 5px;
    font-family: "PingFang SC", "Microsoft YaHei", "Alibaba PuHuiTi 2.0 45";
    line-height: 25px;

    :deep(a) {
      color: #ee9028;
      text-decoration: revert;
    }
  }
}
</style>
